“Jumbo, by Bonfire” Plugin Documentation by “Bonfire Themes”


“Jumbo, by Bonfire”

Hi there and thank you for purchasing 'Jumbo'! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!


Table of Contents

  1. Installation
  2. Building your menu(s)
  3. How to use icons in menu
  4. Customization
  5. Custom activator
  6. Have a question?

Installation - top

Installing the plugin couldn't be simpler.

  1. In your WordPress installation, go to Plugins > Add New
  2. Click on Upload
  3. Use the form there to upload the jumbo-by-bonfire.zip file
  4. On the next screen, activate the plugin.

Once you've activated the plugin, you need to build the actual menu(s). Read the next step for instructions on how to go about that.


Building your menu(s) - top

Jumbo has two different menu locations: one for the main full-screen menu, and the other for the secondary drop-down menu. To attach actual menus to them, you'll first need to build the menus through the standard WordPress menu editor:

  1. In your WordPress installation, head to Appearance > Menus, create a new menu, give it any title you'd like and populate it with menu items as you normally would
  2. Then, simply add your newly-created menu to either the " Jumbo, by Bonfire (primary)" or "Jumbo, by Bonfire (secondary)" locations
  3. That's it!

Note: You can also add 'intros' to the top-level main menu items (smaller text above actual menu item). These need to be added into the menu items' "Description" textarea. By default, this text area isn't activated. To activate it, click on the "Screen Options" tab in the top-right corner of the menu editing page and tick the "Description" checkbox. After doing that, all menu items will have the "Description" textfield visible.

Note: As of version 3.0, the secondary drop-down menu also supports menu item descriptions which appear below the menu item. Like described above, simply add your description into the menu item's "Description" field in the WordPress menu editor.


How to use icons in menu - top

You can add a wide variety of icons to Jumbo's secondary, multi-level drop-down menu. To do so, you simply need to insert the icon code infront of the actual menu item's Navigation Label.

  1. Let's head to Appearance > Menus and build a quick example.
  2. Find the "Custom Links" box and into its URL textfield, insert whatever link you'd like
  3. Into its Link Text textfield, copy-paste the following:
    <i class="fa-solid fa-anchor"></i>Anchor
  4. Click the Add to Menu button

Now check your site and you should see the menu item inside the dropdown menu. Now we'll explain what does what.

What you entered into the "Link Text" textfield were both the icon and the text label.

This part is the icon: <i class="fa-solid fa-anchor"></i>
...and this part is the text label: Anchor

The icon

To see the full range of icons available, head to the Font Awesome website here.

To use one of the icons available there, simply click on it and copy its HTML snippet into the WordPress menu builder as described above.

For example, let's say you want to link to your Twitter account. In that case, the full Navigation Label can be:
<i class="fa-brands fa-twitter"></i>Twitter

Or perhaps you'd like to link to page that lists your podcasts. In case, this would work:
<i class="fa-solid fa-microphone-lines"></i>Podcasts

Or, as a final example, you wish to link to a gallery page:
<i class="fa-solid fa-camera-retro"></i>Image gallery

Secondary icon set

Starting with version 3.9, the Line Awesome icon set is also included in Jumbo. Making use of it is very similar to Font Awesome. To see the icons available, simply head to https://icons8.com/line-awesome, click on the icon you'd like to use and copy-paste the code into your menu.

A few examples that you can paste into the menu editor:

<i class="las la-charging-station"></i>Charge
<i class="las la-paw"></i>Puppy


Customization - top

We've put quite a lot of effort into making sure that Jumbo can be customized to great extent. Whether you just wish to change a few colors here or there and change a few minor settings, or make it essentially unrecognizable from the default appearance, the goal was to give you easy-to-use tools that would allow you to modify the plugin's appearance pretty much however you see fit.

As of version 3.0, all the customizations can be done via the WordPress Live Customizer under Appearance > Customize > Jumbo Plugin. You'll find everything to be organized logically and explained in detail where necessary.


Custom activator - top

If you'd like to use a custom element to activate the menu (a custom menu button, perhaps), you can do so by just giving the element the "jumbo-custom-activator" class. This can be added to a text link, menu button, image etc. You can also hide the default main menu button on the plugin's settings page under Appearance > Customize > Jumbo Plugin.


Have a question? - top

Should you find something unclear about this documentation and have a question, then you can easily reach us through our CodeCanyon profile here (use the bottom-right contact form): http://codecanyon.net/user/BonfireThemes


 

Go To Table of Contents